<!DOCTYPE html>
<html lang="zh"  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>资产入库 - 美德(elvt Year Admin)后台管理系统</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,">
  <meta name="description" content="elvtAssets Admin是一个基于elem+vue 后台管理系统。">
  <meta name="author" content="yinqi">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <link rel="stylesheet" href="plugins/elementui/index.css">
  <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/stylee.css">
  <style type="text/css">
        .sss1 p{
            font-size: 17px;
            color: #1D1E2F;
            margin-left: 130px;
            padding-top: 20px;

        }
      .sss1 p1{
          color: #8c909a;
          font-size: 15px;

      }
        .sss1 p6{
            color: #8c909a;
            font-size: 15px;
            padding-left: 250px;
        }
      .sss1 h1{
          margin-left: 40px;
      }
      .sss1 p2{
          font-size: 17px;
          color: #1D1E2F;
          margin-left: 130px;
      }.sss1 p3{
                 font-weight: bolder;
             }
      .sss1 h2{
          font-size: 17px;
          margin-left: 90px;
      }
.supname{
    margin-left: 400px;
    margin-top: -70px;
}

  </style>
    <style lang="scss">
        .el-dialog__header{
            border-bottom: 1px solid #e8eaec;
            background-color: #0997F7;
            color: #fff;
        }
        .el-dialog__footer {
            border-top: 1px solid #e8eaec;
        }
    </style>

</head>

<body>
<div id="app">
  <div class="container-fluid p-t-15">

    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">


            <div class="toolbar-btn-action">
<!--                <div shiro:hasAnyRoles="BOOS, developer,sys">-->
              <button type="button" class="btn btn-primary m-r-5" @click="handleCreate()">
                <i class="mdi mdi-plus"></i>
                申购登记
              </button>

              <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">新增类型</h4>
                    </div>

                    <span style="color:   #204D74; font-size: 16px;margin-left: 10px;" >类别编码:</span><input class="form-control" type="email" id="example-if-email" name="example-if-email" placeholder="请输入编码类型.." style="width: 400px;" height="100px">
                    <span style="color:  #204D74; font-size: 16px;margin-left: 10px;" >类别名称:<input class="form-control" type="password" id="example-if-password" name="example-if-password" placeholder="请输入类型名称.." style="width: 400px;">
								<div class="danxuank">
									<input type="radio" name="payMethod" value="1" /><span style="color: #0FB25F; font-size: 18px;" >启用</span>
							   <input type="radio" name="payMethod" value="2" /><span style="color: red; font-size: 18px;">禁用</span>
								</div>

						  <div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary"data-dismiss="modal">点击保存</button>
						  </div>
                    </span>
                  </div>

                </div>
              </div>

<!--              <a   class="btn btn-success m-r-5" href="#!"><i class="mdi mdi-check"></i> 启用</a>-->
<!--              <a class="btn btn-warning m-r-5" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a>-->
<!--                <button type="button" class="btn btn-primary m-r-5" @click="deleteByIds"> <i class="mdi mdi-window-close"></i> 删除</button>  </div>-->
            <div class="onselect" style="margin-left: 200px;margin-top: -20px">

                <el-form :inline="true" :model="fromDatas" class="demo-form-inline">

                    <el-form-item label="资产类别">
                        <el-select v-model="fromDatas.gname" style="width: 170px">
                            <el-option label="所有" value=""></el-option>
                            <el-option
                                    v-for="item in optionsGenrecode"
                                    :key="item.gname"
                                    :label="item.gname"
                                    :value="item.gname">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="当前状态">
                        <el-select v-model="fromDatas.isValid" placeholder="当前状态">
                            <el-option label="所有" value=""></el-option>
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资产编码">
                        <el-input v-model="fromDatas.genrecode" placeholder="请输入资产编码"></el-input>
                    </el-form-item>

                    <el-form-item label="资产名称">
                        <el-input v-model="fromDatas.waname" placeholder="请输入资产名称"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
      </div>

          <div class="card-body">

            <div class="table-responsive">

              <el-table  ref="accountTable" size=""  current-row-key="id" :data="dataList" border style="width: 100%"  @selection-change="handleSelectionChange" >
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column type="index" label="序号" width="50"></el-table-column>
                  <el-table-column prop="jobid" label="工号" align="center" ></el-table-column>
                <el-table-column prop="username" label="项目" align="center" ></el-table-column>
                  <el-table-column prop="tel" label="资产类别" align="center" ></el-table-column>
                  <el-table-column prop="dename" label="供应商" align="center" ></el-table-column>
                  <el-table-column label="存放地点"
                                   width="120">
                      <template slot-scope="scope">
                          <span v-if="scope.row.isValid == 1" style="color: #0FB25F">{{scope.row.stname}}</span>
                          <span v-else style="color: red">无</span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="brname" label="品牌" align="center" ></el-table-column>
                  <el-table-column prop="acname" label="取得方式" align="center" ></el-table-column>
                  <el-table-column prop="wadate" label="入库日期" align="center" ></el-table-column>
                  <el-table-column label="状态"
                                   width="80">
                      <template slot-scope="scope">
                          <span v-if="scope.row.isValid == 1" style="color: #0FB25F">正常</span>
                          <span v-else style="color: red">停用</span>
                      </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                      </a>


                  <template slot-scope="scope">
<!--                     <a shiro:hasAnyRoles="BOOS, developer,sys">-->
                      <el-button type="primary" icon="el-icon-edit" circle @click="handleUpdate(scope.row)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
<!--  </a>-->
                  </template>



                </el-table-column>
              </el-table>

            </tbody>


          </div>
          <!--分页组件-->
          <div class="pagination-container">

            <el-pagination
                    class="pagiantion"

                    @current-change="handleCurrentChange"

                    :current-page="pagination.currentPage"

                    :page-size="pagination.pageSize"

                    layout="total, prev, pager, next, jumper"

                    :total="pagination.total">

            </el-pagination>
          </div>


          </div>
        </div>
      </div>

    </div>
    </div>
    <div class="add-form">
        <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

            <el-form ref="dataAddForm" :model="formData" :rules="ruless"  label-position="right" label-width="100px">

                <el-row>

                    <el-col :span="8">

                        <el-form-item label="资产名称" prop="suass">

                            <el-input   v-model="formData.waname"  autocomplete="off"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="资产类别">
                    <el-select v-model="formData.gid" style="width: 250px">
                        <el-option
                                v-for="item in optionsGenrecode"
                                :key="item.genrecode"
                                :label="item.genrecode"
                                :value="item.gid">
                        </el-option>
                    </el-select>
                </el-form-item>

                <div class="supname"><el-form-item label="供应商">
                    <el-select v-model="formData.supid" style="width: 250px">
                        <el-option
                                v-for="item in optionsSupplier"
                                :key="item.supname"
                                :label="item.supname"
                                :value="item.supid">
                        </el-option>
                    </el-select>
                </el-form-item></div>
                <el-row>

                    <el-col :span="10">
                        <el-form-item label="资产编码" prop="jobnub">
                            <el-input    autocomplete="off"  placeholder="自动获取" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-form-item label="品牌">
                        <el-select v-model="formData.brid" style="width: 250px">
                            <el-option
                                    v-for="item in optionsbrand"
                                    :key="item.brname"
                                    :label="item.brname"
                                    :value="item.brid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="取得方式">
                        <el-select v-model="formData.acid" style="width: 250px">
                            <el-option
                                    v-for="item in optionsAchieve"
                                    :key="item.acname"
                                    :label="item.acname"
                                    :value="item.acid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="supname">
                        <el-form-item label="存放位置">
                            <el-select v-model="formData.stid" style="width: 250px">
                                <el-option
                                        v-for="item in optionsStore"
                                        :key="item.stname"
                                        :label="item.stname"
                                        :value="item.stid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-row>

                <el-row>

                    <el-col :span="7">
                        <el-form-item label="选择日期" prop="sunub">
                            <el-date-picker type="date" v-model="formData.wadate"  value-format="yyyy-MM-dd"  placeholder="选择时间":picker-options="pickerOptions"></el-date-picker>

                        </el-form-item>   </el-col>

                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="入库图片" prop="sunub">


                            　　　　<img :src="formData.waimg"  class="head_pic"/>
                        </el-form-item>

                    </el-col>

                </el-row>
                        <el-form-item label="选择日期" prop="sunub">
                            <el-upload
                                    action="http://localhost/warehous/phone"
                                    :file-list="fileList"
                                    :http-request="getFile">

                            </el-upload>
                            <el-button size="small" type="primary">上传</el-button>
                            <el-button size="small" type="success" @click="upload">确认上传</el-button>
                        </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">

                <el-button @click="cancels()">取消</el-button>

                <el-button type="primary" @click="handleEdit()">确定</el-button>

            </div>

        </el-dialog>

        <div class="add-form">

            <el-dialog title="入库登记" :visible.sync="dialogFormVisible" >

                    <el-form ref="dataAddForm" :model="formData" :rules="ruless"  label-position="right" label-width="100px">

                    <el-row>

                        <el-col :span="8">

                            <el-form-item label="资产名称" prop="suass">

                                <el-input   v-model="formData.waname"  autocomplete="off"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                        <el-form-item label="资产类别">
                            <el-select v-model="formData.gid" style="width: 250px">
                                <el-option
                                        v-for="item in optionsGenrecode"
                                        :key="item.genrecode"
                                        :label="item.genrecode"
                                        :value="item.gid">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <div class="supname"><el-form-item label="供应商">
                            <el-select v-model="formData.supid" style="width: 250px">
                                <el-option
                                        v-for="item in optionsSupplier"
                                        :key="item.supname"
                                        :label="item.supname"
                                        :value="item.supid">
                                </el-option>
                            </el-select>
                        </el-form-item></div>
                        <el-row>

                            <el-col :span="10">
                                <el-form-item label="资产编码" prop="jobnub">
                                    <el-input    autocomplete="off"  placeholder="自动获取" :disabled="true" />
                                </el-form-item>
                            </el-col>
                            <el-form-item label="品牌">
                                <el-select v-model="formData.brid" style="width: 250px">
                                    <el-option
                                            v-for="item in optionsbrand"
                                            :key="item.brname"
                                            :label="item.brname"
                                            :value="item.brid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="取得方式">
                            <el-select v-model="formData.acid" style="width: 250px">
                                <el-option
                                        v-for="item in optionsAchieve"
                                        :key="item.acname"
                                        :label="item.acname"
                                        :value="item.acid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                            <div class="supname">
                            <el-form-item label="存放位置">
                                <el-select v-model="formData.stid" style="width: 250px">
                                    <el-option
                                            v-for="item in optionsStore"
                                            :key="item.stname"
                                            :label="item.stname"
                                            :value="item.stid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            </div>
                        </el-row>

                        <el-row>

                            <el-col :span="7">
                                <el-form-item label="选择日期" prop="sunub">
                                <el-date-picker type="date" v-model="formData.wadate"  value-format="yyyy-MM-dd"  placeholder="选择时间":picker-options="pickerOptions"></el-date-picker>

                                </el-form-item>   </el-col>

                            </el-row>
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="选择日期" prop="sunub">
                                    <el-upload
                                            class="upload-demo"
                                            action="http://localhost/warehous/phone"
                                            :on-preview="handlePreview"
                                            :on-remove="handleRemove"
                                            :before-remove="beforeRemove"
                                            multiple
                                            :limit="3"
                                            :on-exceed="handleExceed"
                                            :file-list="fileList">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>

                        </el-row>
                </el-form>

                <div slot="footer" class="dialog-footer">

                    <el-button @click="cancel()">取消</el-button>

                    <el-button type="primary" @click="handleAdd()">确定</el-button>

                </div>

            </el-dialog>

        </div>
    </div>


</div>


  </div>
</div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script src="js/vue.js"></script>

<script src="plugins/elementui/index.js"></script>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
  $(function(){
    $('.search-bar .dropdown-menu a').click(function() {
      var field = $(this).data('field') || '';
      $('#search-field').val(field);
      $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
    });
  });
</script>
<script>
  var vue = new Vue({
      el: '#app',
      data: {
          pickerOptions: {
              disabledDate(time) {
                  return time.getTime() > Date.now();
              },
          },
          multipleSelection: [],
          ids:[],
          file: {},
          fileList: [],
          errorMsg:'',
          dataList: [],//当前页要展示的列表数据
          optionsGenrecode: [],
          optionsSuaplct: [],//获取下拉信息
          optionsbrand: [],
          optionsSupplier: [],
          optionsAchieve: [],
          optionsStore: [],
          dialogFormVisible: false,//添加表单是否可见
          dialogFormVisible4Edit: false,//编辑表单是否可见
          Subscriptiondetails:false,
          formData: {waid:"",genrecode:"",suass:"" ,genrecode:"",waname:"",gname:"",supname:"",brname:"",acname:"",wadate:"",stname:"",isValid:"",waimg:"",gid:"",acid:"",supid:"",stid:"",waing:""},
          fromDatas:{waid:"",genrecode:"",suass:"" ,genrecode:"",waname:"",gname:"",supname:"",brname:"",acname:"",wadate:"",stname:"",isValid:"",waimg:"",gid:"",acid:"",supid:"",stid:"",waing:""}, //表单数据
          rules: {//校验规则
              type: [{required: true, message: this.errorMsg, trigger: 'blur'}],
              name: [{required: true, message: '资产你类型不能为空', trigger: 'blur'}]
          },
          ruless: {//校验规则
              brnub: [{required: true, message: this.errorMsg, trigger: 'blur'}, {
                  min: 3,
                  max: 10,
                  message: '长度在 3 到 10 个字符',
                  trigger: 'blur'
              }],
              brname: [{required: true, message: '资产你类型不能为空', trigger: 'blur'}]
          },
          pagination: {//分页相关模型数据
              currentPage: 1,//当前页码
              pageSize: 10,//每页显示的记录数
              total: 0,//总记录数
              type: "",
              name: "",
              desciption: ""
          },
      },

      //钩子函数，VUE对象初始化完成后自动执行
      created() {
          this.getAll();

      },

      methods: {
          getbrand(){
              axios({
                  method: "get",
                  url: "/brand",
              }).then((res) => {
                  this.optionsbrand = res.data.data;
              });
          },
          getStore(){
              axios({
                  method: "get",
                  url: "/store",
              }).then((res) => {
                  this.optionsStore = res.data.data;
              });
          },

          getAchieve(){
              axios({
                  method: "get",
                  url: "/achieve",
              }).then((res) => {
                  this.optionsAchieve = res.data.data;
              });
          },
          getSupplier(){
              axios({
                  method: "get",
                  url: "/supplier",
              }).then((res) => {
                  this.optionsSupplier = res.data.data;
              });
          },
          getGenres() {
              axios({
                  method: "get",
                  url: "/genres",
              }).then((res) => {
                  this.optionsGenrecode = res.data.data;
              });
          },
          getPename() {
              axios({
                  method: "get",
                  url: "/personnel",
              }).then((res) => {
                  this.optionsSuaplct = res.data.data;
              });
          },
          getAll() {
              var _this=this
              axios({
                method: "post",
                url: "/userMa/" + this.pagination.currentPage + "/" + this.pagination.pageSize,
                  dataType:'json',
                data:this.fromDatas
          }).then((res) => {
                  this.pagination.pageSize = res.data.data.size;
                  this.pagination.currentPage = res.data.data.current;
                  this.pagination.total = res.data.data.total;
                  this.dataList = res.data.data.records;
              });
          },
          handleCurrentChange(currentPage) {
              this.pagination.currentPage = currentPage;
              this.getAll();
          },

          //弹出添加窗口
          handleCreate() {
              this.dialogFormVisible = true;
              this.resetForm();
              this.getGenres();
              this.getbrand();
              this.getSupplier();
              this.getStore();
              this.getAchieve();

          },

          //重置表单
          resetForm() {
              this.formData = {};
          },

          //添加
          handleAdd() {

              this.$refs.dataAddForm.validate((valid)=>{
                  if (valid) {
                      axios.post("/warehous", this.formData).then((res) => {
                          if (res.data.success) {
                              this.dialogFormVisible = false;
                              this.$message.success("添加成功")
                          } else {
                              this.dialogFormVisible = false;
                              this.$message.error("添加失败");
                          }
                          //1.关闭弹窗
                      }).finally(() => {
                              this.getAll();
                          });    }
                  //2.重新加载数据


              })
          },

          //取消
          cancel() {
              this.dialogFormVisible = false;
              this.$message.info("当前操作取消");
          },
          cancels(){
              this.dialogFormVisible4Edit = false;
              this.$message.info("当前操作取消");
          },
          cancelssu(){
              this.Subscriptiondetails = false;
              this.$message.success("已关闭")
          },
          // 删除
          handleDelete(row) {
              this.$confirm("是否删除", "提升", {type: "info"}).then(() => {
                  axios.delete("/warehous/" + row.waid).then((res) => {
                      if (res.data.success) {
                          this.$message.success("删除成功")
                      } else {
                          this.$message.error("删除失败");
                      }

                  }).finally(() => {
                      this.getAll();
                  });
              }).catch(() => {
                  this.$message.info("取消操作");
              });
          },

          //弹出编辑窗口
          handleUpdate(row) {
              this.getGenres();
              this.getbrand();
              this.getSupplier();
              this.getStore();
              this.getAchieve();
              axios.get("/warehous/" + row.waid).then((res) => {
                  if (res.data.success && res.data.data != null) {
                      this.dialogFormVisible4Edit = true;
                      this.formData = res.data.data;
                  } else {
                      this.$message.error("当前数据不存在");
                  }

              }).catch(() => {
                  this.getAll();
              })
          },

          //修改
          handleEdit() {
              axios.put("/warehous/", this.formData).then((res) => {
                  if (res.data.success) {
                      this.dialogFormVisible4Edit = false;
                      this.$message.success("修改成功")
                  }


              }).finally(() => {
                  this.getAll();
              })
          },



          updateGenresStatus($event, row) {
              this.$confirm("是否修改状态", "提示", {type: "info"}).then(() => {
              axios.put("/warehous/" + row.waid + "/" + row.isValid).then((res) => {
                  if (res.data.success) {
                      this.$message.success("修改成功")
                  } else {
                      this.$message.error("删除失败");
                  }
              })

          }).catch(() => {
                  this.getAll();
                  this.$message.info("取消操作");
              })
          },

          handleSelectionChange(val) {
              this.multipleSelection =val
              console.log(this.multipleSelection)
          },
          deleteByIds() {
              for (let i = 0; i < this.multipleSelection.length; i++) {
                  let selectionElement = this.multipleSelection[i];
                  this.selectedIds[i] = selectionElement.id;

              }
              genres=this.multipleSelection
var _this=this
                  axios({
                      method:"post",
                      url:"/warehous",
                      data: _this.selectedIds
                  }).then(function (resp) {

                      if(resp.data == "success"){
                          //删除成功

                          // 重新查询数据
                          // 弹出消息提示
                          _this.$message({
                              message: '恭喜你，删除成功',
                              type: 'success'
                          });

                      }
                  })



          },
          onSubmit() {
              this.$confirm("是否查询？", "温馨提示", {type: "info"}).then(() => {
              this.getAll();
              }).catch(() => {
                  this.$message.info("取消操作");
              });
          },

          addGenrecodecheck() {
              this.errorMsg = '';
              var msgg="当前用户信息存在，请检查";
              axios({
                  method: "post",
                  url: "/warehous/checkform",
                  data: this.formData
              }).then(function (resp) {
                  if (resp.data.success) {
                this.errorMsg=resp.data.msg
                        alert(msgg)

                  }
              })
          },

          getFile(item) {
              console.log(item.file)
              this.file = item.file
          },
          upload() {
              const fd = new FormData()
              fd.append('filename', this.file)
              const config = { headers: { 'Content-Type': 'multipart/form-data' }}
              this.axios.post('/warehous/phone', fd, config
              )

          },
          handleRemove(file, fileList) {
              console.log(file, fileList);
          },
          handlePreview(file) {
              console.log(file);
          },
          handleExceed(files, fileList) {
              this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          beforeRemove(file, fileList) {
              return this.$confirm(`确定移除 ${ file.name }？`);
          }
      }


  })

</script>
</body>
</html>